<template>
  <div>
    <x-header title="设置" style="background-color: #33bb99;">
      <span slot="overwrite-left" @click="back" class="iconfont icon-shangyiyedanjiantou" style="color: #fff;font-size: 22px;"></span>
    </x-header>
    <group>
      <cell title="修改密码" @click.native="toUpdatePass"></cell>
    </group>
    <group>
      <cell title="新消息提醒" is-link>
        <div class="badge-value">
          <badge text="888"></badge>
        </div>
      </cell>
    </group>
    <group>
      <cell title="关于我们" ></cell>
    </group>
    <group>
      <cell title="退出" @click.native="loginOut"></cell>
    </group>
    <div v-transfer-dom>
      <popup v-model="show1">
        <div class="popup0">
          <div class="popup0-item" @click="click(true)"><i class="iconfont icon-tuichu5"></i>退出登录</div>
          <div class="popup0-item" @click="click(false)"><i class="iconfont icon-chakan"></i>再看看</div>
        </div>
      </popup>
    </div>
    <!--<actionsheet v-model="show1" :menus="menus1" @on-click-menu="click" style="text-align: left"></actionsheet>-->
    <!--修改密码-->
    <div v-transfer-dom>
      <confirm v-model="isUpdate" title="修改密码" @on-confirm="onConfirm" >
        <div class="pass-input">
          <span>旧密码：</span>
          <input type="text" v-model="oldPass" placeholder="请输入旧密码" @change="verifyOld"/>
          <icon :type="oldIcon"></icon>
        </div>
        <div class="pass-input">
          <span>新密码：</span>
          <input type="text" v-model="newPass" placeholder="请输入新密码" @change="verifyNew"/>
          <icon :type="newIcon"></icon>
        </div>
      </confirm>
    </div>
    <!--提示框-->
    <toast v-model="showPositionValue" type="text" :time="800" is-show-mask :text="toastMsg" :position="position"></toast>
  </div>
</template>

<script>
  import { Group, Cell, XSwitch, Actionsheet, Badge, Confirm, Icon, md5, Popup, Toast} from 'vux'

  export default {
    name: "Set",
    components: {
      Group,Cell,XSwitch,Actionsheet,Badge,Confirm,Icon, Popup, Toast
    },
    data () {
      return {
        show1: false,
        isUpdate:false,
        oldIcon:'',
        newIcon:'',
        oldPass:'',
        newPass:'',
        showPositionValue: false, // Toast提示
        position: 'default',
        toastMsg: '',
      }
    },
    methods:{
      // 返回
      back(){
        this.$router.push('/project0/view2/mine');
      },
      // 修改密码
      toUpdatePass(){
        this.isUpdate = true
      },
      // 验证旧密码
      verifyOld(){
        this.oldIcon = this.public.pwd1(this.password)?'success':'warn'
        return this.public.pwd1(this.password)?true:false
      },
      // 验证新密码
      verifyNew(){

        if(this.newPass==this.oldPass){
          this.msg('新密码不得与旧密码一致');
          this.newIcon = 'warn'
          return false
        }
        this.newIcon = this.public.pwd1(this.password)?'success':'warn'
        return this.public.pwd1(this.password)?true:false
      },
      // 提交修改前验证
      valid(){
        if(this.verifyOld() && this.verifyNew()){
          return true
        }
      },
      onConfirm (msg) {
        if(!this.valid()) return;

        this.$vux.loading.show({
          text: 'Loading'
        });
        this.config0.post('/supply/appBase/changePassword', {
          currentPassword: md5(this.oldPass),
          newPassword: md5(this.newPass),
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==0){
            this.oldIcon = ''
            this.newIcon = ''
            this.oldPass = ''
            this.newPass = ''
            this.msg(res.data.message);
            this.$router.push('/project0/login');
          }else{
            this.msg(this.config0.handleError(res.data));
          }
        }).catch(err=>{
          this.$vux.loading.hide();
          this.msg('网络错误');
        })
      },
      // 信息提示
      msg(str){
        this.$vux.toast.show({
          type: 'text',
          text: str,
          position: 'default',
          time: 800,
        });
      },
      // 再看看 / 退出登录
      click (flag) {
        if(!flag){
          this.show1 = false;
          return
        }
        // 退出登录
        this.$vux.loading.show({
          text: 'Loading'
        });
        this.config0.post('/supply/appLogin/loginout', {}).then(res=>{
          if(res.data.code==0){
            this.$vux.loading.hide();
            setTimeout(()=>{
              this.$router.push('/project0/login');
            },200)
            this.show1 = false
            this.msg(res.data.message);
          }else{
            this.msg(this.config0.handleError(res.data));
          }
        }).catch(err=>{
          this.$vux.loading.hide();
          this.msg('网络错误');
        })
      },
      // 点击退出弹出确认框
      loginOut(){
        this.show1 = true
      },
    }
  }
</script>

<style scoped>
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  .pass-input{
    line-height: 30px;
    color: #333;
    border: 1px solid #dedede;
    border-radius: 5px;
    margin: 20px 0 10px;
    font-size: 16px;
    padding-left:5px;
  }
  .weui-icon-warn,.weui-icon-success{
    font-size: 14px !important;
  }
  input{
    outline: none;
    width: 53%;
    border: 0px;
    line-height: 30px;
  }
  input::-webkit-input-placeholder{
    color:#999;
    font-size:14px;
    line-height:30px;
  }
  input::-moz-placeholder{
    color:#999;
    font-size:14px;
    line-height:30px;
  }
  input::-ms-input-placeholder{
    color:#999;
    font-size:14px;
    line-height:30px;
  }
  .vux-popup-dialog{
    background: #fff;
    color:#798086;
  }
  .popup0-item{
    line-height:40px;
  }
  i.iconfont{
    padding:0 10px 0 20px;
  }
</style>
